<template>
  <div class="col main-content">
    <div class="row tool-bar">
      <div class="col">
        <div class="inline-item">
          <el-input v-model="searchKey" clearable style="width: 200px;" placeholder="请输入查询信息"/>
          <el-button @click="searchCustomer" icon="el-icon-search" type="primary">查询</el-button>
        </div>
        <div class="inline-item">
          <div class="label inline">
            排序分类:
          </div>
          <div class="inline">
            <el-radio-group v-model="orderName" @change="orderChange">
              <el-radio :label="1">按时间</el-radio>
              <el-radio :label="2">按消费</el-radio>
              <el-radio :label="3">按欠款</el-radio>
              <el-radio :label="4">按余额</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="inline-item">
          <div class="label inline">
            排序规则:
          </div>
          <div class="inline">
            <el-radio-group @change="orderChange" v-model="orderType">
              <el-radio :label="1">降序</el-radio>
              <el-radio :label="2">升序</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="inline-item">
          <el-button type="primary" @click="createCustomer"><i class="fa fa-user-plus"></i> 添加用户</el-button>
        </div>

        <div class="inline-item">
          <div class="label inline">
            用户状态:
          </div>
          <div class="inline">
            <el-radio-group @change="orderChange" v-model="search.isLocked">
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">锁定</el-radio>
            </el-radio-group>
          </div>
        </div>

      </div>
    </div>

    <div class="row mt-15">
      <div class="col">
        <el-table
          :data="customers"
          border
          tooltip-effect="dark"
          v-loading="loading"

          @selection-change="handleSelectionChange"
          ref="table"
        >
          <el-table-column
            type="selection" width="48" fixed="left">
          </el-table-column>
          <el-table-column label="用户名" min-width="200" fixed="left">
            <template slot-scope="scope">
              <h-user-display v-model="scope.row"/>
            </template>
          </el-table-column>

          <el-table-column
            label="邮箱"
            min-width="180">
            <template slot-scope="scope">
              <a :href="mailto(scope.row)">{{scope.row.email}}</a>
            </template>
          </el-table-column>
          <el-table-column
            label="创建日期"
            width="160"
          >
            <template slot-scope="scope">
              <span class="center">{{scope.row.createTime}}</span>
            </template>

          </el-table-column>
          <el-table-column label="用户等级">
            <template slot-scope="scope">
              <span class="center">{{scope.row.gradeCode}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="消费总额"
            min-width="120">
            <template slot-scope="scope">
              {{scope.row.consume}}
            </template>
          </el-table-column>
          <el-table-column
            label="欠款总额"
            min-width="120">
            <template slot-scope="scope">
              <div class="red">
                {{scope.row.arrearage}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="余额"
            min-width="120">
            <template slot-scope="scope">
              <div class="red">
                {{scope.row.balance}}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="默认地址"
            show-overflow-tooltip
            min-width="300"
          >
            <template slot-scope="scope">
              <h-address-display v-model="scope.row"/>
            </template>
          </el-table-column>

          <el-table-column label="最后催款时间" width="180">
            <template slot-scope="scope">
              <span class="red center">{{scope.row.reminderTime}}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态"
                           width="90">
            <template slot-scope="scope">
              <div v-if="scope.row.isLocked==0" class="el-alert el-alert--success is-center">
                正常
              </div>
              <div v-else class="el-alert el-alert--error is-center">
                已锁定
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="操作" align="center" width="220" fixed="right">
            <template slot-scope="scope">
              <el-tooltip placement="top">
                <div slot="content">编辑用户的基础信息</div>
                <el-button type="text" @click="doEdit(scope.$index,scope.row)">
                  编辑
                </el-button>
              </el-tooltip>
              <el-tooltip placement="top">
                <div slot="content">修改用户密码</div>
                <el-button type="text" @click="doChangePwd(scope.$index,scope.row)">
                  修改密码
                </el-button>
              </el-tooltip>

              <el-tooltip placement="top">
                <div slot="content">模拟用户登录</div>
                <el-button type="text" @click="mockLogin(scope.$index,scope.row)">
                  模拟登录
                </el-button>
              </el-tooltip>

              <el-tooltip placement="top" v-if="scope.row.isLocked==0">
                <div slot="content">锁定用户</div>
                <el-button type="text" class="red" @click="doLocked(scope.$index,scope.row,true)">
                  锁定
                </el-button>
              </el-tooltip>

              <el-tooltip placement="top" v-else="scope.row.isLocked==1">
                <div slot="content">解锁用户</div>
                <el-button type="text" @click="doLocked(scope.$index,scope.row,false)">
                  解锁
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>
        <div class="h-pagination">
          <div v-if="selectIds.length>0" class="pagination-tool">
            <el-button type="primary" @click="reminderAction">批量催款</el-button>
          </div>
          <el-pagination
            @size-change="handlesizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.pagination.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="search.pagination.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="search.pagination.total">
          </el-pagination>
        </div>
      </div>
    </div>

    <h-admin-change-password-dialog v-model="currentData" :show.sync="showChagePassword" title="修改密码"/>

    <h-admin-customer-edit-dialog v-model="currentData" :show.sync="showCustomerEdit"
                                  title="编辑用户信息" @success="doneCustomerEdit"></h-admin-customer-edit-dialog>

  </div>
</template>

<script>
  import AdminLayout from 'src/components/common/js/admin-layout'
  import AdminService from 'src/service/admin'
  import TableMix from 'src/components/table-mix'
  import HUserDisplay from 'src/components/common/display/HUserDisplay'
  import HAddressDisplay from 'src/components/common/display/HAddressDisplay'
  import HAdminChangePasswordDialog from 'src/components/admin/common/HAdminChangePasswordDialog'
  import HAdminCustomerEditDialog from './HCustomerEditDialog'

  export default {
    mixins: [AdminLayout, TableMix],
    components: {HAdminCustomerEditDialog, HUserDisplay, HAddressDisplay, HAdminChangePasswordDialog},
    name: 'HAdminCustomer',
    data() {
      return {
        search: {
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          key: '',
          type: 2,
          status: 1,
          orderBy: 'id desc',
          isLocked: 0
        },
        orderName: 1,
        orderType: 1,
        customers: [],
        loading: true,
        selectIds: [],
        searchKey: '',
        currentData: {},
        showChagePassword: false,
        showCustomerEdit: false
      }
    },
    watch: {
      searchKey: function (n, o) {
        if (n.length >= 2 || n == '') {
          this.getDatas()
        }
      }
    },
    methods: {
      //用户模拟登录
      mockLogin: function (index, data) {
        const me = this
        AdminService.mocklogin({
          userId: data.id
        }).then(ds => {
          if (ds != null && ds.datas[0] == true) {
            window.location.href = '/shop/index.html'
          }
        })
      },

      mailto: function (data) {
        if (data.email != null) {
          return 'mailto:' + data.email
        }
      },
      handleSelectionChange: function (ids) {
        this.selectIds = ids.map(d => {
          return d.id
        })
      },
      doneCustomerEdit: function (data) {
        const me = this
        me.showCustomerEdit = false
        if (data != null) {
          me.currentData.gradeCode = data.code
        }
      },
      reminderAction: function () {
        const me = this
        AdminService.arrearageReminder({userIds: me.selectIds}).then(ds => {
          if (ds != null) {
            me.$message.success('发送催款信息成功!')
            me.$refs.table.clearSelection()
          } else {
            me.$message.error('发送催款信息失败!')
          }
        })
      },
      doChangePwd: function (index, data) {
        this.currentData = data
        this.showChagePassword = true
      },
      orderChange: function () {
        let orderby = ''
        if (this.orderName == 1) {
          orderby = 'id'
        } else if (this.orderName == 2) {
          orderby = 'consume'
        } else {
          orderby = 'arrearage'
        }
        if (this.orderType == 1) {
          orderby += ' desc'
        } else if (this.orderType == 2) {
          orderby += ' asc'
        }
        this.search.orderBy = orderby
        this.getDatas()
      },
      handlesizeChange: function (size) {
        this.search.pagination.limit = size
        this.getDatas()
      },
      handleCurrentChange: function (page) {
        this.search.pagination.page = page
        this.getDatas()
      },
      //获取数据信息
      getDatas: function () {
        const me = this
        me.loading = true
        me.search.key = me.searchKey
        AdminService.memberList(me.search)
          .then(function (datas) {
            if (datas != null) {
              me.customers = datas.datas
              me.search.pagination = datas.pagination
            }
            me.$nextTick(function () {
              me.loading = false
            });
          })
      },
      createCustomer: function () {
        this.$router.push('/admin/customer/create.html')
      },
      searchCustomer: function () {
        //查询用户
        this.search.pagination.page = 1
        this.getDatas()
      },
      doEdit: function (index, data) {
        this.showCustomerEdit = true
        this.currentData = data
      },
      doLocked: function (index, data, locked) {
        const me = this
        const message = locked ? '此操作后使用户将不能再登录系统,是否继续?' : '此操作后使用户将能再次登录系统,是否继续?'
        me.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            ids: [data.id],
            status: locked ? 1 : 0
          }
          AdminService.lockedCustomer(params).then(ds => {
            if (ds != null) {
              data.isLocked = locked
              me.$message.success(locked ? '锁定用户成功。' : '解锁用户成功。')
            } else {
              me.$message.error(locked ? '锁定用户失败。' : '解锁用户失败。')
            }
          })
        }).catch(() => {
        })

      }
    },
    created: function () {
      this.hideASider()
      this.setASiderItems([])
    },
    beforeMount: function () {
      //this.initTalbeHeight(255)
      this.getDatas()
    }
  }
</script>
